<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5与CSS3基础教程(第8版)-第一到四章的代码</title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    <header>
        <nav role="navigation">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">服务</a></li>
            </ul>
        </nav>
    </header>
    <div id="top">
        这是顶部
    </div>
    <input type="email" required title="啊哈哈">
    <p>这是一段很长很长的话，
        我也不知道打什么话好，
        现在我已经想不出打什么字了
        <small>
            这是严肃的细则内容
        </small>
        <strong>Warning: Do not approach the
            zombies <em>under any circumstances</em>
        </strong><br>
        <em>着重点标签em</em><br>
        <strong>测试嵌套strong标签<strong>内层strong标签</strong></strong>
        <time>
            2016-12-13 16:08:42
        </time>
    </p>
    <main role="main">
        <article>
            <h1>这个是一级标题 </h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <p>
                一篇文章内容,很长吗？不是很长啊，因为我不想打字了。
                <em>em内容是什么</em>
            </p>
            <img src="static/imgs/boy.png" alt="this is a boy" title="鼠标提示内容在title" >
        </article>

        <figure>
            <figcaption>图表相关标签</figcaption>
            <img src="static/imgs/00015.png" >
        </figure>

        <p>When he went to <mark>The Louvre</mark> he learned
         that <cite>Mona Lisa</cite> is also
         known as <cite lang="it">La Gioconda
         </cite>.<cite>
                使用cite 元素可以指明对某内容源的引
                用或参考。<br>例如，戏剧、脚本或图书的标题，
                歌曲、电影、照片或雕塑的名称，演唱会或
                音乐会， 规范、报纸或法律文件等<br>
                同样是斜体显示
            </cite>
        <blockquote>
            引用文本
            I want all my senses engaged. Let
             me absorb the world's variety and
             uniqueness.
        </blockquote>
        <dfn>术语</dfn>
        </p>
        <q>测试q标签的内容,是一个可以自动加引号的元素</q>
        <section>
            <h2>Ceremoney</h2>
            <ol>
                <li>Opening Processing</li>
                <li>Speech by valedictorian</li>
            </ol>
        </section>
        <section>
            <h2>Graduates</h2>
            <ol>
                <li>Molly</li>
                <li>Lily</li>
                <li>lucy</li>
            </ol>
        </section>
        <aside role="complementary">
            <h1>这个是附注标签aside</h1>
            <p>附注内容,很长很长很长啦啦啦啦啦</p>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
            </ul>
        </aside>
    </main>
    <time datetime="2016-12-13">16:30</time>
    <time>16:13</time>
    <time>3h 4m 5s</time>
    <abbr title="National football league">NFL</abbr>
    <p>
        创建上标和下标示例
        5<sup>2</sup>+20 = 45
        co<sub>3</sub>ca

    </p>
    <ul>
        <li><del>2 desks del标签有横线</del></li>
        <li>1 chalkboard</li>
        <li><del>4 solar-powered tablets</del></li>
        <li><ins>1 bicycle ins标签有下划线</ins></li>
    </ul>
    <pre>
        <code>
            def func():
                pass #预定义格式标签&lt;pre&gt;可以使代码格式化显示，也就是输入的缩进和换行都会保留
        </code>
    </pre>
    <code>
        def func():
        pass #非预定义格式
    </code>
    <p>
        Project completion status: <meter value="0.80">80% completed</meter>
    </p>
    <p>
        Car brake pad wear: <meter low="0.25" high="0.75" optimum="0" value="0.21">21% worn</meter>
    </p>
    <p>Miles walked during half-marathon:
        <meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter>
    </p>
    <div id="progress">
        progress元素:<progress value="0.15"></progress>
        meter元素自动显示一个进度条:<meter value="0.32" title="meter元素自动显示进度条" /><br>
    </div>


    <a href="#top">回到顶部</a>

    <!--
    页脚标签最近的祖先标签是谁 就是谁的页脚
    只能为页面级的页脚添加role=contentinfo,而且一个页面只能用一次-->
<footer role="contentinfo">
    &copy;kongfuzhou<address>天河区华景软件园</address>
</footer>
</body>
</html>